<template>
    <div style="overflow-x: hidden;">
        <div class="top-msg">
            <span></span>
            <span>全部课程</span>
            <span></span>
        </div>
        <!-- 课程list -->
        <div v-for="(i, index) in alllist" :key="index" @click="goview(i.id, i.g.id)">
            <div class="list-img">
                <img :src="i.img"/>
            </div>
            <div class="list-content">
                <div class="title">
                    <span v-if="i.g.status === 'pending'">报名中</span>
                    <span v-if="i.g.status === 'fail'">失败</span>
                    <span v-if="i.g.status === 'success'">成功</span>
                    <span>{{i.title}} [{{i.g.title}}]</span>
                </div>
                <div class="msg">
                    <div class="msg-all">
                      <div class="list">
                        <div>{{i.g.date}}</div>
                        <div>上课时间</div>
                      </div>
                      <div class="list">
                        <div>{{i.g.region}}</div>
                        <div>上课地点</div>
                      </div>
                      <div class="list">
                        <div>￥{{i.g.low_price}}</div>
                        <div>最低学费</div>
                      </div>
                    </div>
                    <div class="list-one" style="border: 0;float: right; margin-right: 25px;">
                        <circles :allvalue="i.g.max_person" :nowvalue="i.g.current_person" :indexid="indexid + index"></circles>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="bottom">
                    <div>
                        <span v-for="(it, indexa) in i.gs" :key="indexa" @click.stop="goview(i.id, it.id)">{{it.region}} {{it.date}}</span>
                    </div>
                    <div>
                        {{i.total}}人学过
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="line"></div>
        </div>
        <tab-ber :current="1"></tab-ber>
    </div>
</template>

<script>
import TabBer from '../public/tabber'
import circles from '../public/circle'
import msgbox from '@/common/msgbox.js'
import { Toast } from 'mint-ui'
export default {
  name: 'index',
  components: {
    TabBer,
    circles: circles
  },
  data () {
    return {
      indexid: 'id1',
      minheight: '',
      alllist: []
    }
  },
  destroyed () {
    document.documentElement.scrollTop = 0
    window.pageYOffset = 0
    document.body.scrollTop = 0
  },
  mounted () {
    this.getView()
    this.minheight = screen.height - 80
  },
  methods: {
    goview (id, gid) {
      this.$router.push('/view/' + id + '/' + gid)
    },
    getView () {
      let that = this
      this.$g.ajax({
        path: 'courses/index',
        method: 'post',
        data: that.searchmsg,
        cbSuccess: function (data) {
          that.alllist = data.memo.list
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
    .line{
        height: 16px;
        background-color: #f3f3f3
    }
    .top-msg{
        color: #888888;
        font-size: 14px;
        text-align: center;
        padding: 10px 0;
    }
    .top-msg span:nth-of-type(1){
        display: inline-block;
        width: 60px;
        border: 0.5px solid #0640a4;
        position: relative;
        top: -4px;
    }
    .top-msg span:nth-of-type(2){
        margin: 0 20px;
    }
    .top-msg span:nth-of-type(3){
        display: inline-block;
        width: 60px;
        border: 0.5px solid #0640a4;
        position: relative;
        top: -4px;
    }
    .list-img{
        img{
            height: 220px;
            width: 100%;
        }
    }
    .list-content{
        margin-top: 6px;
        .title{
            padding: 0 10px;
            font-size: 14px;
            word-break: break-all;
            word-wrap: break-word;
            line-height: 20px;
            span:nth-of-type(1){
                display: inline-block;
                padding: 2px 6px;
                background-color: #0640a1;
                color: #ffffff;
                font-size: 12px;
                border-radius: 5px;
                position: relative;
                top: -2px;
                margin-right: 2px;
            }
        }
        .msg{
            margin: 0 10px;
            /*padding: 16px 0 0 10px;*/
            border-bottom: 1px solid #cccccc;
            font-size: 12px;
            width: 100%;
            box-sizing: border-box!important;
            position: relative;
          padding-top: 20px;
            .msg-all{
              margin-right: 100px;
            }
            .list{
                float: left;
                text-align: center;
                border-right: 1px solid #cccccc;
                width: 32%;
                div:nth-of-type(1){
                    color: #0640a1;
                    margin-bottom: 5px;
                }
                div:nth-of-type(2){
                    color: #999999;
                }
            }
        }
        .bottom{
            padding: 4px 10px 14px 10px;
            font-size: 12px;
            border-bottom: 1px solid #cccccc;
            div:nth-of-type(1){
                float: left;
                width: 83%;
                span{
                    margin-top: 10px;
                    margin-right: 4px;
                    display: inline-block;
                    padding: 4px 8px;
                    background-color: #eef3fc;
                    color: #0640a1;
                    border-radius: 8px;
                }
                span:nth-of-type(1){
                    background-color: #0640a1;
                    color: #ffffff;
                }
            }
            div:nth-of-type(2){
                float: right;
                width: 17%;
                text-align: center;
                font-size: 12px;
                margin-top: 10px;
                color: #9d9d9d;
                position: relative;
                top: 4px;
            }
        }
    }
</style>
